<template>
  <view class="body">
    <view class="chat-title">
      <image src="/static/返回箭头.png" class="back-img" @click="backWelcome" />
      <view class="chat-name">校园小易解答</view>
    </view>
  </view>
  <view class="scroll-container">
    <scroll-view class="scroll-view" scroll-y>
      <view v-for="(message, index) in filteredHeList" :key="index" class="chat-message">
        <view>
          <image src="/static/聊天头像.png" class="chat-img" />
        </view>
        <view class="chat-content">
          <view class="chat-text">{{ message.text }}</view>
          <view class="chat-time">{{ message.time }}</view>
        </view>
      </view>
      <view v-if="show === true && myList.length > 0" class="mychat-message">
        <view class="chat-content">
          <view class="mychat-text">{{ myList[myList.length - 1].text }}</view>
          <view class="mychat-time">{{ myList[myList.length - 1].time }}</view>
        </view>
      </view>
      <view v-if="show === true&& Time===true&& heList.length > 0" class="hechat-message">
        <view>
          <image src="/static/聊天头像.png" class="chat-img" />
        </view>
        <view class="chat-content">
          <view class="chat-text">{{ heList[heList.length - 1].text }}</view>
          <view class="chat-time">{{ heList[heList.length - 1].time }}</view>
        </view>
      </view>

    </scroll-view>
  </view>
  <view style="display: flex;">
    <textarea  rows="6"
     class="inputView" v-model="myMessage" placeholder="说些什么吧！" >
     </textarea>
    <view>
      <image src="/static/发送图标.png" class="send-img" @click="addMessage(myMessage)" />
    </view>
  </view>






</template>
<script setup lang="ts">
import { computed } from 'vue';
import { chatData, } from './chat';
const { backWelcome, myList, heList,Time,
  myMessage, filteredHeList, addMessage, show } = chatData();


</script>
<style lang="scss" scoped>
@import './chat'
</style>